<template>
  <!-- 最外层的容器 -->
  <section class="todoapp">
    <!-- 头部 -->
    <header class="header">
      <h1>代办事项</h1>
      <input type="text" class="new-todo" placeholder="添加新的待办事项" @keyup.ctrl.enter="addTodo">
    </header>
    <!-- 待办列表 -->
    <section class="main">
      <!-- 全选按钮 -->
      <input type="checkbox" id="toggle-all" class="toggle-all" />
      <label for="toggle-all">全部完成</label>
      <!-- 待办事项列表 -->
      <ul class="todo-list">
        <li v-for="(todo, index) in filteredTodos" :key="todo.id" :class="{
        completed: todo.completed
      }">
          <div class="view">
            <input type="checkbox" class="toggle" v-model="todo.completed" />
            <label>{{ todo.title }}</label>
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
        </li>
      </ul>
    </section>
  </section>
</template>

<script setup>
  import { ref, computed, watch, watchEffect } from "vue";
  //每一项待办事项的结构如下
  //  [{id: 1, title: 'xxx', completed: false}]

  const STORAGE_KEY = 'todo-list'
  //尝试从本地存储中获取数组,如果没有数据则使用空数组（第一次）
  // const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
  const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY)) || [])
  const visibility = ref('all') // 默认是显示所有待办事项

  //接下来我们需要一个过滤器，用于过滤不同状态的待办事项（全部，未完成，已完成）
  const filters = {
    all: (todos) => todos,
    active: (todos) => todos.filters(todo => !todo.completed),  //未完成
    completed: (todos) => todos.filter((todo) => todo.completed) //已完成
  }
  //接下来，根据当前的状态去调取对应的过滤器函数
  // 如果只有全部的情况，不需要计算属性
  const filteredTodos = computed(() => filters[visibility.value](todos.value))

  function addTodo(e) {
    //拿到用户输入的值
    const value = e.target.value.trim()
    if (value) {
      todos.value.push({ id: Date.now(), title: value, completed: false })
    }
    e.target.value = ""
  }

  //设置监听
  watchEffect(()=>{
    //每次todos变化的时候，都需要存储
    localStorage.setItem(STORAGE_KEY,JSON.stringify(todos.value))
  })
</script>

<style scoped>
  @import url('./assets/todo.css');
</style>